﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>道有道—发现更美好的世界</title>
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
		<link href="CSS/jquery.pagepiling.css" rel="stylesheet" />
		<link href="CSS/index.css" rel="stylesheet" />
		<link href="CSS/nav.css" rel="stylesheet" />
	</head>

	<body>
		<div id="all">
			<!--头部-->
			<header>
				<div id="topBox2">
					<div id="top">
						<img src="images/logo.png" />
					</div>
					<div class="fullBtn">
						<span class="span1"></span>
						<span class="span2"></span>
						<span class="span3"></span>
					</div>
				</div>
				<!--头部-->
				<div id="topBox" class="clearfix">
					<div id="logoBox">
						<img src="images/logo.png" />
					</div>
					<div id="left_nav">
						<ul>
							<li>
								<a href="#">移动广告</a>
							</li>
							<li><span></span></li>
							<li>
								<a href="#">移动开发</a>
							</li>
							<li><span></span></li>
							<li>
								<a href="#">社会化营销</a>
							</li>
							<li><span></span></li>
							<li>
								<a href="#">开发者合作</a>
							</li>
						</ul>
					</div>
					<div id="right_nav">
						<ul>
							<li>
								<a href="#">关于</a>
							</li>
							<li><span>/</span></li>
							<li>
								<a href="#">资讯</a>
							</li>
							<li><span>/</span></li>
							<li>
								<a href="#">投资者关系</a>
							</li>
							<li><span>/</span></li>
							<li>
								<a href="#">招聘</a>
							</li>
							<li><span>/</span></li>
							<li>
								<a href="#">联络</a>
							</li>
						</ul>
					</div>
				</div>
			</header>

			<div id="nav">
				<ul>
					<li>
						<div>
							<p class="navbg1">咨询电话 400 666 0909</p>
						</div>
					</li>
					<li>
						<div>
							<p class="navbg2">广告主在线咨询</p>
						</div>
					</li>
					<li>
						<div>
							<p class="navbg2">媒体主在线咨询</p>
						</div>
					</li>
					<li>
						<div>
							<p class="navbg3" id="top_btn">返回顶部</p>
						</div>
					</li>
				</ul>
			</div>

			<!--第一屏-->
			<section id="cnt1" class="section">
				<!--bannner图-->
				<div id="bannerBox">
					<div id="banner">
						<div id="bg">
							<div id="bg_text">
								<img src="images/Home/bnr-1.png" />
							</div>
							<div id="bg_img">
								<img id="bg_img1" src="images/Home/img-sb.png" style="vertical-align: middle;position: relative;z-index: 10;" />
								<span id="span1"></span>
								<span id="span2"></span>
								<span id="span3"></span>
							</div>

						</div>
						<video id="video" autoplay="autoplay" loop="loop">
							<source src="images/Home/dyd.mp4" type="video/mp4" /> 
						</video>
						<!--<video id="video" loop="loop">
                    <source src="images/Home/dyd.mp4" type="video/mp4">
                </video>-->
					</div>
				</div>
			</section>
			<!--第二屏-->
			<section id="cnt2" class="section">
				<!--内容-->
				<div id="bottomBox_2"></div>
				<!--字-->
				<div id="textBox">
					<div id="title">
						<h2>移动广告</h2>
						<div id="btn" style="cursor: pointer;">
							<p><span id="t1">&gt;</span><span id="t2">业务详情</span></p>
						</div>
						<p id="p2">覆盖6亿手机用户</p>
						<p id="p3">道有道不但与腾讯、百度、谷歌、今日头条等4万余个移动媒体建立了合作，还自主创建了2万个移动媒体，覆盖高消费人群</p>
					</div>
				</div>
				<!--图-->
				<div id="imgBox">
					<div id="cnt2_img">
						<img src="images/Home/id1.jpg" style="height:100%;width:100%;display: block" />
						<img src="images/Home/id5.jpg" style="height:100%;width:100%;display: none" />
						<img src="images/Home/id9.jpg" style="height:100%;width:100%;display: none" />
					</div>
					<div id="cnt2_list">
						<div>
							<ul style="opacity: 1">
								<li><img src="images/Home/ydic-1.png" /></li>
								<li>
									<p>用户全覆盖</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-2.png" /></li>
								<li>
									<p>广告不浪费</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-3.png" /></li>
								<li>
									<p>数据不作假</p>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</section>
			<!--第三屏-->
			<section id="cnt3" class="section">
				<!--内容-->
				<div id="bottomBox_3"></div>
				<!--字-->
				<div id="textBox3">
					<div id="title3">
						<h2>移动开发</h2>
						<div id="cnt3_btn" style="cursor: pointer;">
							<p><span id="cnt3_t1">&gt;</span><span id="cnt3_t2">业务详情</span></p>
						</div>
						<p id="cnt3_p2">小成本也能满足个性化需求</p>
						<p id="cnt3_p3">近百个功能模块方便客户一键式自由组合，满足客户个性化营销需求。一个后台系统，同时管理APP、移动网页、微信公众号等多个工具。</p>
					</div>
				</div>
				<!--图-->
				<div id="imgBox3">
					<div id="cnt3_img">
						<img src="images/Home/id2.jpg" style="height:100%;width:100%;display: block" />
						<img src="images/Home/id6.jpg" style="height:100%;width:100%;display: none" />
						<img src="images/Home/id10.jpg" style="height:100%;width:100%;display: none" />
					</div>
					<div id="cnt3_list">
						<div>
							<ul style="opacity: 1">
								<li><img src="images/Home/ydic-4.png" /></li>
								<li>
									<p>移动营销工具</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-5.png" /></li>
								<li>
									<p>数据化营销管理</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-6.png" /></li>
								<li>
									<p>解决方案</p>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</section>
			<!--第四屏-->
			<section id="cnt4" class="section">
				<!--内容-->
				<div id="bottomBox_4"></div>
				<!--字-->
				<div id="textBox4">
					<div id="title4">
						<h2>社会化营销</h2>
						<div id="cnt4_btn" style="cursor: pointer;">
							<p><span id="cnt4_t1">&gt;</span><span id="cnt4_t2">业务详情</span></p>
						</div>
						<p id="cnt4_p2">海量资源严格审核</p>
						<p id="cnt4_p3">三十多万个微信大号、朋友圈、微博大号、视频大号资源，通过严格系统及人工审核，杜绝“僵尸粉”、“虚假阅读量”、“虚假转发量”，确保资源品质。</p>
					</div>
				</div>
				<!--图-->
				<div id="imgBox4">
					<div id="cnt4_img">
						<img src="images/Home/id3.jpg" style="height:100%;width:100%;display: block" />
						<img src="images/Home/id7.jpg" style="height:100%;width:100%;display: none" />
						<img src="images/Home/id11.jpg" style="height:100%;width:100%;display: none" />
					</div>
					<div id="cnt4_list">
						<div>
							<ul style="opacity: 1">
								<li><img src="images/Home/ydic-7.png" /></li>
								<li>
									<p>移动营销工具</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-8.png" /></li>
								<li>
									<p>数据化营销管理</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-9.png" /></li>
								<li>
									<p>解决方案</p>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</section>
			<!--第五屏-->
			<section id="cnt5" class="section">
				<!--内容-->
				<div id="bottomBox_5"></div>
				<!--字-->
				<div id="textBox5">
					<div id="title5">
						<h2>开发者合作</h2>
						<div id="cnt5_btn" style="cursor: pointer;">
							<p><span id="cnt5_t1">&gt;</span><span id="cnt5_t2">业务详情</span></p>
						</div>
						<p id="cnt5_p2">想尽办法让你赚的更多</p>
						<p id="cnt5_p3">与上千个广告主保持长期、深度的合作，确保广告填充率和用户体验；多样的广告展示机制，全面提升活跃和非活跃用户价值，并提供业内有竞争力的结算价格，以最大化开发者收益</p>
					</div>
				</div>
				<!--图-->
				<div id="imgBox5">
					<div id="cnt5_img">
						<img src="images/Home/id4.jpg" style="height:100%;width:100%;display: block" />
						<img src="images/Home/id8.jpg" style="height:100%;width:100%;display: none" />
						<img src="images/Home/id12.jpg" style="height:100%;width:100%;display: none" />
					</div>
					<div id="cnt5_list">
						<div>
							<ul style="opacity: 1">
								<li><img src="images/Home/ydic-10.png" /></li>
								<li>
									<p>最大化的合作收益</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-11.png" /></li>
								<li>
									<p>便捷的结算方式</p>
								</li>
							</ul>
						</div>
						<span></span>
						<div>
							<ul>
								<li><img src="images/Home/ydic-12.png" /></li>
								<li>
									<p>稳定的广告平台</p>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</section>
			<!--第六屏-->
			<section id="cnt6" class="section">
				<div id="cnt6_img">
					<img src="images/Home/dao.png" style="margin-top: 22%;" />
				</div>
				<div id="cnt6_box">
					<div class="border_box" id="box1">
						<div>
							<ul>
								<li><img src="images/Home/yd-gg2.png" /></li>
								<li>
									<h3 class="li_h3">公司介绍</h3></li>
								<li>
									<p class="li_p">company introduction</p>
								</li>
								<li><span class="li_span"></span></li>
							</ul>
						</div>
					</div>
					<div class="border_box" id="box2">
						<div>
							<ul>
								<li><img src="images/Home/yd-gg2.png" /></li>
								<li>
									<h3 class="li_h3">文化理念</h3></li>
								<li>
									<p class="li_p">Culture</p>
								</li>
								<li><span class="li_span"></span></li>
							</ul>
						</div>
					</div>
					<div class="border_box" id="box3">
						<div>
							<ul>
								<li><img src="images/Home/yd-gg2.png" /></li>
								<li>
									<h3 class="li_h3">发展历程</h3></li>
								<li>
									<p class="li_p">milestone</p>
								</li>
								<li><span class="li_span"></span></li>
							</ul>
						</div>
					</div>
					<div class="border_box" id="box4">
						<div>
							<ul>
								<li><img src="images/Home/yd-gg2.png" /></li>
								<li>
									<h3 class="li_h3">管理团队</h3></li>
								<li>
									<p class="li_p">management team</p>
								</li>
								<li><span class="li_span"></span></li>
							</ul>
						</div>
					</div>
					<div class="border_box" id="box5">
						<div>
							<ul>
								<li><img src="images/Home/yd-gg2.png" /></li>
								<li>
									<h3 class="li_h3">荣誉资质</h3></li>
								<li>
									<p class="li_p">Qualification</p>
								</li>
								<li><span class="li_span"></span></li>
							</ul>
						</div>
					</div>
					<div class="border_box" id="box6">
						<div>
							<ul>
								<li><img src="images/Home/yd-gg2.png" /></li>
								<li>
									<h3 class="li_h3">社会责任</h3></li>
								<li>
									<p class="li_p">CSR</p>
								</li>
								<li><span class="li_span"></span></li>
							</ul>
						</div>
					</div>
				</div>
			</section>
		</div>

		<script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="JS/jquery.pagepiling.min.js"></script>
		<script type="text/javascript" src="JS/index.js"></script>
		<script type="text/javascript" src="JS/top.js"></script>
		<script>
			$(function() {
				var tw = document.documentElement.clientWidth;
				$("#bannerBox").css("width", tw + "px");
				$('#all').pagepiling({
					sectionsColor: ['#00d8cc', '#00c13f', '#ff7d23', '#ff1d77', 'red', 'yellow', "#E7E7E7"],
					anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
					navigation: {
						'textColor': "red",
						'position': 'left',
						'tooltips': ['首页', '移动广告', '移动开发', '社会化营销', '开发者合作', '关于我们', '新闻中心', '合作伙伴']
					},
					afterLoad: function(all, index) {
						if(index === 1) {

							$("#topBox2").animate({
								top: "-12%"
							}, 300, function() {
								$("#topBox").animate({
									top: "0"
								}, 300)
							})
						}

						//                如果BOX2改变之后
						var box2 = false;
						if(box2 === false) {
							$("#bottomBox_2").css("opacity", "0");
							$("#textBox").css({
								"left": "-100%",
								"opacity": "0"
							});
							$("#imgBox").css({
								"right": "-100%",
								"opacity": "0"
							})
						}
						//                如果BOX2改变之前
						if(index === 2) {
							$("#topBox").animate({
								top: "-12%"
							}, 300, function() {
								$("#topBox2").animate({
									top: "0"
								}, 300)
							});
							$("#bottomBox_2").animate({
								opacity: "1"
							}, 500, function() {
								box2 = false;
							});
							$("#textBox").animate({
								left: "81px",
								opacity: "1"
							}, 1000);
							$("#imgBox").animate({
								right: "6%",
								opacity: "1"
							}, 1000)
						}

						//                如果BOX3改变之后
						var box3 = false;
						if(box3 === false) {
							$("#bottomBox_3").css({
								"top": "-100%",
								"opacity": "0"
							});
							$("#title3").css("display", "none");
							$("#cnt3_list").css({
								opacity: "0",
								width: '60%',
								left: '10px',
								top: "-20px",
								height: '140%'
							});
							$("#cnt3_img").css({
								left: "-100%",
								opacity: "0"
							})
						}
						//                如果BOX3改变之前
						if(index === 3) {
							$("#bottomBox_3").animate({
								top: "0",
								opacity: "1"
							}, 300, function() {
								$("#title3").fadeIn(1200);
								$("#cnt3_list").animate({
									opacity: "1",
									width: '20%',
									left: '0',
									top: "0",
									height: '100%'
								}, 500, function() {
									box3 = false;
								});
								$("#cnt3_img").animate({
									left: "0",
									opacity: "1"
								}, 900)
							})
							//                    alert(3);
						}
						//                如果BOX4改变之后
						var box4 = false;
						if(box4 === false) {
							$("#bottomBox_4").css({
								top: "-100%",
								opacity: "0"
							});
							$("#title4").fadeOut();
							$("#cnt4_list").css({
								width: "160px",
								height: "130%",
								left: "-10px",
								top: "-20px",
								opacity: "0"
							});
							$("#cnt4_img").css({
								left: "100px",
								opacity: "0"
							})
						}
						//                如果BOX4改变之前
						if(index === 4) {
							$("#bottomBox_4").animate({
								top: "0",
								opacity: "1"
							}, 300, function() {
								$("#title4").fadeIn(1200);
								$("#cnt4_list").animate({
									width: "20%",
									height: "100%",
									left: "0",
									top: "0",
									opacity: "1"
								}, 800);
								$("#cnt4_img").animate({
									left: "0",
									opacity: "1"
								}, 800, function() {
									box4 = false;
								})
							});

							//                    alert(4);
						}
						//                如果BOX5改变之后
						var box5 = false;
						if(box5 === false) {
							$("#bottomBox_5").fadeOut();
							$("#title5").css({
								opacity: "0",
								right: "-100%"
							});
							$("#imgBox5").css({
								opacity: "0",
								left: "-54%"
							})
						}
						//                如果BOX5改变之前
						if(index === 5) {
							$("#bottomBox_5").fadeIn(300);
							$("#title5").animate({
								opacity: "1",
								right: "0"
							}, 1000);
							$("#imgBox5").animate({
								opacity: "1",
								left: "8%"
							}, 1000, function() {
								box5 = false;
							})
						}

						var box6 = false;
						if(box6 === false) {
							$("#cnt6_img").css({
								left: "-100%"
							});
							$("#box1").css({
								opacity: "0",
								top: "50px"
							});
							$("#box2").css({
								opacity: "0",
								top: "60px"
							});
							$("#box3").css({
								opacity: "0",
								top: "70px"
							});
							$("#box4").css({
								opacity: "0",
								top: "80px"
							});
							$("#box5").css({
								opacity: "0",
								top: "90px"
							});
							$("#box6").css({
								opacity: "0",
								top: "100px"
							});
						}
						//                如果BOX6改变之前
						if(index === 6) {
							$("#box1").animate({
								opacity: "1",
								top: "0"
							}, 300, function() {
								box6 = false;
							});
							$("#box2").animate({
								opacity: "1",
								top: "0"
							}, 500);
							$("#box3").animate({
								opacity: "1",
								top: "0"
							}, 700, function() {
								$("#cnt6_img").animate({
									left: "0"
								}, 500)
							});
							$("#box4").animate({
								opacity: "1",
								top: "0"
							}, 800);
							$("#box5").animate({
								opacity: "1",
								top: "0"
							}, 1000);
							$("#box6").animate({
								opacity: "1",
								top: "0"
							}, 1200)
						}

						//                如果BOX7改变之前
						if(index === 7) {
							//                    alert(7);
						}
						//                if(index===7){
						////                    alert(8);
						//                }
						//                $("#textBox").animate({"left":"16%","top":"50%"},500)
					}
				});

			});
		</script>

	</body>

</html>